<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<!--
    表单:<form>
    action: 表单提交位置 可以是网站 也可以是请求处理
    method： post get提交方式
    get可以直接看到 但是效率高
    post看不到 比较安全 但是可以传输大文件

    输入:<input>记得都要加name
    type:text password ... 输入的种类 file上传文件 checkbox 多选框 radio单选框 button普通按钮 image图片按钮 submit提交按钮 reset重置
    value 初始值
    name 提供一个名字
    maxlength 最大输入字符数
    size 文本框长度


    下拉框:select
    option 下拉框选项 <option value="4">印度</option>

    文本域
    <textarea name="textarea" cols="30" rows="10">内容</textarea>

    hidden隐藏
    readonly只读
    disable不可用
    placeholder 提示信息
    required 不能为空
    pattern 正则表达式判断
-->
<h1>注册</h1>
<form action="myhtml.html" method="post">
    <p>姓名:<input type="text" name="username" required placeholder="输入姓名" maxlength="9" size="30"></p>
    <p>密码:<input type="password" name="pwd" required placeholder="请输入密码"></p>
    <p>
        性别:
        <input type="radio" value="男" name="sex">男
        <input type="radio" value="女" name="sex">女
    </p>

    <p>
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">写代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="girl" name="hobby">女孩子
    </p>
    <p>
        <input type="button" value="点击">
        <input type="image" src="../resource/image/1.jpg">
    </p>
    <p>
        <input type="file" name="files">
        <input type="button" value="上传文件" name="upload">
    </p>
<!--下拉框-->
    <p>国家:<br>
        <select name="Conutry">
            <option value="1" selected>中国</option>
            <option value="2">美国</option>
            <option value="3">瑞士</option>
            <option value="4">印度</option>
        </select>
    </p>

    <p>文本域：<br>
        <textarea name="textarea" cols="30" rows="10">内容</textarea>
    </p>
<!--带验证的input-->
    <p>
        <input type="email" id="mark" name="邮箱">
        <input type="URL" name="网址">
        <input type="number" name="数字" max="999" min="0" value="1" step="1">
    </p>

<!--滑块-->
    <p>
        <input type="range" max="100" min="0" step="1" name="voice">
    </p>
<!--
搜索框
-->
    <p>
        搜索:<input type="search" name="Search">
    </p>

    <p>
        <input type="submit" name="sub">
        <input type="reset" name="redo" value="清空">
    </p>
<!--label标签 可以用for转到Input-->
    <p>
        <lable for="a">点我点我</lable>
        <input type="text" id="a" name="inTxt">
    </p>

    <p>
        自定义的邮箱:
        <input type="text" pattern="[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?">
    </p>

    <p>End</p>
</form>
</body>
</html>